<template>
  <div class="echartsTest">
    echarts 图表测试页面 图表数据和echarts图表实例对象全部托管到vuex的 echartsOperation 模块的状态库中
    <button @click="changeOptions()">测试更改Echarts图表数据（更改vuex-echartsOperation模块中的数据状态）</button>
    <div class="chartRegion">
      <ocn-echart :containerId="'barChart'"></ocn-echart>
      <ocn-echart :containerId="'barChart2'"></ocn-echart>
      <ocn-echart :containerId="'barChart3'"></ocn-echart>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "echartsTest",
  data() {
    return {};
  },
  computed: {
    ...mapGetters("echartsOperation", [
      "getterChartOption",
      "getterContainers",
    ]),
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations("echartsOperation", ["setterChartOption"]),
    // 测试更改echarts Store模块的配置数据, 查看图表动态变化
    changeOptions() {
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        }, //X轴
        yAxis: { type: "value" }, //Y轴
        series: [{ data: [110, 70, 150, 80, 200, 110, 130], type: "bar" }], //配置项
      };

      this.setterChartOption({
        valueName: "barChart",
        valueVal: option,
        fn: (obj) => {
          this.$utils.setConsole("set操作同步回调---：", obj);
          this.$utils.setConsole(
            "set操作同步回调---：",
            this.getterChartOption("barChart")
          );
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echartsTest {
  background-color: #ffffff;
  height: 100%;
  /* stretch 属性标识按照对称轴垂直方向沾满容器 前提是容器没有设置对称轴垂直方向的具体距离属性 width/height*/
  align-self: stretch;
  padding: 1%;
  margin: 2px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  .chartRegion {
    width: 100%;
    height: 100%;
    /* stretch 属性标识按照对称轴垂直方向沾满容器 前提是容器没有设置对称轴垂直方向的具体距离属性 width/height*/
    align-self: stretch;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
</style>